<template>
	<g-main clazz="container">
		<loading ref="loadingRef">
			<view class="auth-wrap">
				
				<view class="auth-title font-42 font-w-500">欢迎走进“紫牛云”</view>
				
				
				<view class="auth-info">
					<view class="auth-avatar">
						<!-- #ifndef H5 -->
							<open-data type="userAvatarUrl"></open-data>
						<!-- #endif -->
						<!-- #ifdef H5 -->
						<image src="https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132" mode="aspectFill" alt="" />
						<!-- #endif -->
					</view>
					<view class="auth-separate">
						<image class="auth-wave"  src='@/static/image/wave.png' mode="aspectFill"></image>
						<image class="auth-wave"  src='@/static/image/wave.png' mode="aspectFill"></image>
					</view>
				</view>
				
				
				
				<view class="auth-content padding">
					<!-- <view class="auth-option-title font-28">微信用户一键绑定</view> -->
					<view class="flex flex-direction auth-options align-center">
						<mini-phonenumber :callback="goBack" class="option"  clazz="lg round cu-btn bg-69 auth-btn option" >同意授权</mini-phonenumber>
						<button @tap="goBack" class="margin-top-lg  cu-btn line-grey lg round go-back option">返 回</button>
					</view>
				</view>
			</view>


		</loading>
	</g-main>
</template>

<script setup>

	import loading from '@/views/components/loading/full-loading.vue';
	import miniPhonenumber from '@/views/components/auth/mini-phonenumber.vue';
	import { useBasic } from '@/business/mixin/basic.js';
	
	import { onLoad } from '@dcloudio/uni-app';
	import { ref,nextTick } from 'vue'
	const loadingRef = ref(null)
	useBasic();
	onLoad(() => {
		nextTick(() => {
			loadingRef.value.hide();
		})
		
	})
	
	function goBack(){
		uni.navigateBack()
	}
	

</script>

<style scoped>
	@property --themeColor{
		syntax: "<color>";
		initial-value:#CB0E0E;
		inherits: false;
	}
	>>> .container{
		background-color: var(--themeColor)
	}
	.auth-wrap{
		background-color: inherit;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		padding: 0;
		height: calc(100vh - var(--window-top));
		overflow: hidden;
		justify-content: space-between;
	}
	.auth-title{
		color: #fff;
		padding-top: 200rpx;
		text-align: center;
	}
	
	.auth-info {
		margin-top: 100rpx;
		position: relative;
		height: 200rpx;
	}
	
	.auth-avatar{
		margin: 0 auto;
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		overflow: hidden;
		animation: sway 10s ease-in-out infinite;
		opacity: .95;
	}
	.auth-avatar image{
		width: 100%;
		height: 100%;
	}
	.auth-separate{
		position: relative;
		top: -72rpx;
		height: 260rpx;
	}
	.auth-wave{
		height: 100%;
		width: 1000%;
		z-index: -30;
		opacity: 0.725;
		position: absolute;
		right: 0;
		bottom: 0;
		max-width: 2250rpx;
		animation-name: wave;
		animation-timing-function: linear;
		animation-iteration-count: infinite;
	}
	.auth-wave:first-of-type{
		animation-duration: 3.5s;
	}
	.auth-wave:last-of-type{
		animation-duration: 6s;
	}
	

	.auth-content{
		flex: 1 1 auto;
		position: relative;
		z-index: 10;
		flex-direction: column;
		align-items: stretch;
		justify-content: center;
		width: 100%;
		height: 100%;
		flex-shrink:0;
		background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(0.1, #f4f4f4), to(#f4f4f4));
	}

	.auth-options{
		margin-top: 150rpx;
	
	} 

	.auth-options > >>>.option
	{
	  font-size: 13pt;
	  line-height: 85rpx;
	  height: 85rpx;
	  text-align: center;
	  border-radius: 100rpx;
	  margin-left: 10%;
	  margin-right: 10%;
	}
	.auth-options >>>.auth-btn {
		background-color: var(--themeColor);
		color: #fff;
		width: 500rpx;
	}
	.auth-options >>>.go-back{
		width: 500rpx;
		font-size: inherit;
	}
	@keyframes sway {
	  0% {
	    transform: translate3d(0, 20rpx, 0) rotate(-15deg);
	  }
	
	  17% {
	    transform: translate3d(0, 0rpx, 0) rotate(25deg);
	  }
	
	  34% {
	    transform: translate3d(0, -20rpx, 0) rotate(-20deg);
	  }
	
	  50% {
	    transform: translate3d(0, -10rpx, 0) rotate(15deg);
	  }
	
	  67% {
	    transform: translate3d(0, 10rpx, 0) rotate(-25deg);
	  }
	
	  84% {
	    transform: translate3d(0, 15rpx, 0) rotate(15deg);
	  }
	
	  100% {
	    transform: translate3d(0, 20rpx, 0) rotate(-15deg);
	  }
	}
	@keyframes wave {
	  from {
	    transform: translate3d(125rpx, 0, 0);
	  }
	
	  to {
	    transform: translate3d(1125rpx, 0, 0);
	  }
	}
	
	
</style>
